$(function(){
    //如何获取地址栏中keyWord参数的值
    // console.log(location.search);
    var x = new URLSearchParams(location.search);
    //声明全局变量用来保存接口需要的参数
    var proName = x.get("keyWord");
    var brandId = null;
    var price = 2;
    var num = 2;
    var page = 1;
    var pageSize = 2;

    $.ajax({
        url:"/product/queryProduct",
        data:{ proName, brandId, price, num, page, pageSize },
        success:function(res){
            console.log(res);
            var html = template("product",res);
            $(".list").html(html);
        }
    })

    mui.init({
        pullRefresh : {
            container:'.xxx',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
            up : {
                height:50,//可选.默认50.触发上拉加载拖动距离
                auto:false,//可选,默认false.自动上拉加载一次
                contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore:'没有更多数据了O(∩_∩)O哈哈~',//可选，请求完毕若没有更多数据时显示的提醒内容；
                callback :function(){
                    //endPullupToRefresh() 是由上拉加载组件对象来进行调用的
                    //在callback函数中 ，this就能访问到上拉加载组件对象
                    //console.log("调用了一次callback");
                    //endPullupToRefresh(true) 传递参数为true则代表没有更多的数据了，后面再去拉动组件也没用了
                    //this.endPullupToRefresh(true);
                    //endPullupToRefresh(false) 传递参数为false则代表后续还有数据，那么组件还可以继续拉动
                    //this.endPullupToRefresh(false);

                    //发送ajax请求下一页的数据
                    //页码增加
                    page++;
                    //根据最新的页码请求数据
                    $.ajax({
                        url:"/product/queryProduct",
                        data:{ proName, brandId, price, num, page, pageSize },
                        success:(res)=>{
                            if(res.data.length > 0){
                                console.log(res);
                                var html = template("product",res);
                                $(".list").append(html);
                                //有数据，应该还可以继续拉动
                                this.endPullupToRefresh(false);
                            }else{
                                //没有数据，让上拉加载组件不能继续拉动了
                                this.endPullupToRefresh(true);
                            }
                        }
                    })
                }
            }
        }
    });

    //给价格排序按钮添加点击事件
    $("#priceSort").on("tap",function(){
        //切换箭头
        $(this).find("span").toggleClass("mui-icon-arrowdown mui-icon-arrowup");
        //更改全局变量price中的排序值
        price = $(this).find("span").hasClass("mui-icon-arrowdown") ? 2 : 1;
        console.log(price);
        //将页码重置为1
        page = 1;
        //将上拉加载组件重置为可以拉动
        mui('.xxx').pullRefresh().refresh(true);

        //发送请求，获取数据
        $.ajax({
            url:"/product/queryProduct",
            data:{ proName, brandId, price, num, page, pageSize },
            success:function(res){
                console.log(res);
                var html = template("product",res);
                $(".list").html(html);
            }
        })
    })
    //给销量排序按钮添加点击事件
})